<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <!-- 顶部筛选区域 -->
    <div class="bg-white px-4 py-3 border-b">
        <div class="flex justify-between items-center">
            <!-- 订单状态筛选标签 -->
            <div class="flex space-x-6">
                <button class="text-blue-600 font-medium border-b-2 border-blue-600 pb-1" onclick="filterOrders('all')">
                    全部
                </button>
                <button class="text-gray-600" onclick="filterOrders('unpaid')">
                    未支付
                </button>
                <button class="text-gray-600" onclick="filterOrders('paid')">
                    已支付
                </button>
            </div>
            
            <!-- 筛选按钮 -->
            <button onclick="showFilter()" class="flex items-center text-gray-600">
                <span class="mr-2 text-sm">筛选</span>
                <i class="fas fa-bars text-lg"></i>
            </button>
        </div>
    </div>

    <!-- 订单列表 -->
    <div class="p-4 space-y-3">
        <!-- 第一个订单 - 液化气用户家财险 -->
        <div class="bg-white rounded-lg p-4 order-item" data-status="paid">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="text-base font-medium text-gray-900">液化气用户家财险</h3>
                    <p class="text-sm text-gray-500 mt-1">订单号：LHQ202401010001</p>
                </div>
                <div class="bg-blue-600 text-white px-2 py-1 rounded text-xs">
                    待生效
                </div>
            </div>
            
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">投保人</span>
                    <span class="text-gray-900" id="order1-applicant">张三</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">被保险家庭</span>
                    <span class="text-gray-900" id="order1-insured">张三家庭</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">保险金额</span>
                    <span class="text-gray-900">5万元</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">保费</span>
                    <span class="text-red-600 font-medium" id="order1-premium">¥10</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">投保时间</span>
                    <span class="text-gray-900" id="order1-time">2024-01-01 14:30</span>
                </div>
            </div>

            <div class="flex justify-end mt-4 space-x-2">
                <button class="px-4 py-2 border border-gray-300 rounded text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-2 bg-blue-600 text-white rounded text-sm">
                    查看保单
                </button>
            </div>
        </div>

        <!-- 第二个订单示例 -->
        <div class="bg-white rounded-lg p-4 order-item" data-status="unpaid">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="text-base font-medium text-gray-900">综合意外险</h3>
                    <p class="text-sm text-gray-500 mt-1">订单号：SY202312010001</p>
                </div>
                <div class="bg-orange-600 text-white px-2 py-1 rounded text-xs">
                    待支付
                </div>
            </div>
            
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">投保人</span>
                    <span class="text-gray-900">李四</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">被保险人</span>
                    <span class="text-gray-900">李四</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">保险金额</span>
                    <span class="text-gray-900">30万元</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">保费</span>
                    <span class="text-red-600 font-medium">¥128</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">投保时间</span>
                    <span class="text-gray-900">2023-12-01 10:15</span>
                </div>
            </div>

            <div class="flex justify-end mt-4 space-x-2">
                <button class="px-4 py-2 border border-gray-300 rounded text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-2 bg-blue-600 text-white rounded text-sm">
                    查看保单
                </button>
                <button class="px-4 py-2 bg-orange-600 text-white rounded text-sm">
                    继续支付
                </button>
            </div>
        </div>

        <!-- 第三个订单示例 -->
        <div class="bg-white rounded-lg p-4 order-item" data-status="paid">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <h3 class="text-base font-medium text-gray-900">家庭财产保险</h3>
                    <p class="text-sm text-gray-500 mt-1">订单号：JC202306010001</p>
                </div>
                <div class="bg-green-600 text-white px-2 py-1 rounded text-xs">
                    已生效
                </div>
            </div>
            
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">投保人</span>
                    <span class="text-gray-900">王五</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">被保险家庭</span>
                    <span class="text-gray-900">王五家庭</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">保险金额</span>
                    <span class="text-gray-900">50万元</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">保费</span>
                    <span class="text-red-600 font-medium">¥66</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">投保时间</span>
                    <span class="text-gray-900">2023-06-01 16:45</span>
                </div>
            </div>

            <div class="flex justify-end mt-4 space-x-2">
                <button class="px-4 py-2 border border-gray-300 rounded text-sm text-gray-600">
                    查看详情
                </button>
                <button class="px-4 py-2 bg-blue-600 text-white rounded text-sm">
                    查看保单
                </button>
                <button class="px-4 py-2 bg-green-600 text-white rounded text-sm">
                    申请理赔
                </button>
            </div>
        </div>
    </div>

    <!-- 空状态 -->
    <div id="emptyState" class="text-center py-12 hidden">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-file-alt text-gray-400 text-2xl"></i>
        </div>
        <p class="text-gray-500 text-sm">暂无相关订单</p>
    </div>

    <script>
        // 页面加载时初始化第一个订单的数据
        document.addEventListener('DOMContentLoaded', () => {
            loadFirstOrderData();
        });

        // 从localStorage获取数据并更新第一个订单
        function loadFirstOrderData() {
            try {
                // 获取投保人信息
                const userType = localStorage.getItem('userType') || 'individual';
                let applicantName = '';
                let insuredFamily = '';
                
                if (userType === 'group') {
                    const enterpriseInfo = JSON.parse(localStorage.getItem('enterpriseInfo') || '{}');
                    applicantName = enterpriseInfo.enterpriseName || '企业名称';
                    insuredFamily = (enterpriseInfo.enterpriseName || '企业名称') + '家庭';
                } else {
                    const personalInfo = JSON.parse(localStorage.getItem('personalInfo') || '{}');
                    applicantName = personalInfo.personName || '个人姓名';
                    insuredFamily = (personalInfo.personName || '个人姓名') + '家庭';
                }

                // 获取保费信息
                const totalPremium = localStorage.getItem('totalPremium') || '10';
                
                // 更新第一个订单的显示信息
                document.getElementById('order1-applicant').textContent = applicantName;
                document.getElementById('order1-insured').textContent = insuredFamily;
                document.getElementById('order1-premium').textContent = '¥' + totalPremium;

                // 生成当前时间的投保时间
                const now = new Date();
                const timeStr = now.getFullYear() + '-' + 
                    String(now.getMonth() + 1).padStart(2, '0') + '-' + 
                    String(now.getDate()).padStart(2, '0') + ' ' +
                    String(now.getHours()).padStart(2, '0') + ':' + 
                    String(now.getMinutes()).padStart(2, '0');
                
                document.getElementById('order1-time').textContent = timeStr;

            } catch (error) {
                console.error('加载订单数据失败:', error);
                // 使用默认值
                document.getElementById('order1-applicant').textContent = '张三';
                document.getElementById('order1-insured').textContent = '张三家庭';
                document.getElementById('order1-premium').textContent = '¥10';
            }
        }

        // 订单筛选功能
        function filterOrders(status) {
            const orders = document.querySelectorAll('.order-item');
            const emptyState = document.getElementById('emptyState');
            const orderContainer = orders[0].parentElement;
            let visibleCount = 0;

            // 更新标签样式
            document.querySelectorAll('[onclick^="filterOrders"]').forEach(btn => {
                btn.classList.remove('text-blue-600', 'font-medium', 'border-b-2', 'border-blue-600');
                btn.classList.add('text-gray-600');
                btn.classList.remove('pb-1');
            });
            event.target.classList.remove('text-gray-600');
            event.target.classList.add('text-blue-600', 'font-medium', 'border-b-2', 'border-blue-600', 'pb-1');

            // 筛选订单
            orders.forEach(order => {
                const orderStatus = order.getAttribute('data-status');
                if (status === 'all' || orderStatus === status) {
                    order.style.display = 'block';
                    visibleCount++;
                } else {
                    order.style.display = 'none';
                }
            });

            // 显示/隐藏空状态
            if (visibleCount === 0) {
                orderContainer.style.display = 'none';
                emptyState.classList.remove('hidden');
            } else {
                orderContainer.style.display = 'block';
                emptyState.classList.add('hidden');
            }
        }

        // 显示筛选选项
        function showFilter() {
            alert('筛选功能');
        }

        // 底部导航功能
        function goToHome() {
            window.location.href = 'index.html';
        }

        function goToProducts() {
            // 产品页面功能，暂时显示提示
            alert('产品页面');
        }

        function goToBusiness() {
            // 展业页面功能，暂时显示提示
            alert('展业页面');
        }

        function goToProfile() {
            // 我的页面功能，暂时显示提示
            alert('我的页面');
        }
    </script>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2">
        <div class="flex justify-around items-center">
            <!-- 首页 -->
            <div class="flex flex-col items-center space-y-1 cursor-pointer" onclick="goToHome()">
                <i class="fas fa-home text-gray-600 text-lg"></i>
                <span class="text-xs text-gray-600">首页</span>
            </div>
            
            <!-- 产品 -->
            <div class="flex flex-col items-center space-y-1 cursor-pointer" onclick="goToProducts()">
                <i class="fas fa-box text-gray-600 text-lg"></i>
                <span class="text-xs text-gray-600">产品</span>
            </div>
            
            <!-- 展业 -->
            <div class="flex flex-col items-center space-y-1 cursor-pointer" onclick="goToBusiness()">
                <i class="fas fa-briefcase text-gray-600 text-lg"></i>
                <span class="text-xs text-gray-600">展业</span>
            </div>
            
            <!-- 我的 -->
            <div class="flex flex-col items-center space-y-1 cursor-pointer" onclick="goToProfile()">
                <i class="fas fa-user text-gray-600 text-lg"></i>
                <span class="text-xs text-gray-600">我的</span>
            </div>
        </div>
    </div>

    <!-- 为了防止内容被底部导航栏遮挡，添加底部padding -->
    <div class="h-16"></div>

</body>
</html>